<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
            font-size:16px;
        }
        .container{
            width:90%;
            margin:10rem auto;
            height:50rem;
            background-color:#CCC;
        }
        .container .left{
            width:60%;
            height:50rem;
            float:left;
        }
        .container .right{
            width:20%;
            float:left;
            margin-left:5rem;
            height:50rem;

        }
        .container .light_on, .container .light_off{
            width:100%;
            height:100%;
        }
        .container .light_on{
            height:100%;
            display:none;
        }
        .container .light_off{
            height:100%;
            display:block;
        }
        .container .right input{
            display:block;
            width:100%;
            font-size:4rem;
            margin-top:10rem;
        }
    </style>
</head>
<body>
    
    <div class="container">
        <div class="left">
            <img src="light_on.PNG" class="light_on">
            <img src="light_off.PNG" class="light_off">
        </div>
        <div class="right">
            <input type="button" id="btn_open" value="开灯" />
            <input type="button" id="btn_close" value="关灯" />
        </div>
    </div>
    <script>
        document.getElementById("btn_open").onclick=function(){
            document.getElementsByClassName("light_on")[0].style.display="block";
            document.getElementsByClassName("light_off")[0].style.display="none";
        }
        document.getElementById("btn_close").onclick=function(){
            document.getElementsByClassName("light_on")[0].style.display="none";
            document.getElementsByClassName("light_off")[0].style.display="block";
        }
    </script>
</body>
</html>